<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Induction Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        
        // --- Helper Functions ---

        /**
         * Draws a line from (x1, y1) to (x2, y2) with an arrowhead at (x2, y2).
         * @param {CanvasRenderingContext2D} ctx The canvas context.
         * @param {number} x1 Start x-coordinate.
         * @param {number} y1 Start y-coordinate.
         * @param {number} x2 End x-coordinate.
         * @param {number} y2 End y-coordinate.
         * @param {number} headlen Length of the arrowhead sides.
         */
        function drawArrow(ctx, x1, y1, x2, y2, headlen = 10) {
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        }

        /**
         * Draws a dimension line with arrowheads at both ends.
         */
        function drawDimArrow(ctx, x1, y1, x2, y2, headlen = 8) {
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            // Arrowhead at (x2, y2)
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            // Arrowhead at (x1, y1)
            const angle2 = Math.atan2(-dy, -dx);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 - headlen * Math.cos(angle2 - Math.PI / 6), y1 - headlen * Math.sin(angle2 - Math.PI / 6));
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 - headlen * Math.cos(angle2 + Math.PI / 6), y1 - headlen * Math.sin(angle2 + Math.PI / 6));
        }

        /**
         * Draws a dimension line with T-shaped ends.
         */
        function drawDimT(ctx, x1, y1, x2, y2, t_len = 10) {
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            // T-end at (x1, y1)
            ctx.moveTo(x1 - t_len / 2, y1);
            ctx.lineTo(x1 + t_len / 2, y1);
            // T-end at (x2, y2)
            ctx.moveTo(x2 - t_len / 2, y2);
            ctx.lineTo(x2 + t_len / 2, y2);
        }

        /**
         * Draws text with a subscript, centered at (x, y).
         */
        function drawSubscript(ctx, text, sub, x, y) {
            const baseFont = "italic 20px Times New Roman";
            const subFont = "14px Times New Roman";
            
            ctx.font = baseFont;
            const baseWidth = ctx.measureText(text).width;
            ctx.font = subFont;
            const subWidth = ctx.measureText(sub).width;
            
            const totalWidth = baseWidth + subWidth;
            const startX = x - totalWidth / 2;
            
            ctx.textAlign = 'left';
            ctx.textBaseline = 'alphabetic';
            
            ctx.font = baseFont;
            ctx.fillText(text, startX, y);
            
            ctx.font = subFont;
            ctx.fillText(sub, startX + baseWidth - 2, y + 4); 
        }

        // --- Main Drawing Logic ---

        // Style setup
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.2;
        ctx.font = "italic 20px Times New Roman";
        ctx.textAlign = 'center';
        
        // --- Define coordinates ---
        const cy = 190;
        const l1_h = 180;
        const l2_w = 120;
        
        const rect_x = 250;
        const rect_y = cy - l1_h / 2; // 100
        const rect_w = l2_w;
        const rect_h = l1_h;
        
        const d1_dist = 60;
        const wire2_x = rect_x - d1_dist; // 190
        const wire1_to_wire2_dist = 50;
        const wire1_x = wire2_x - wire1_to_wire2_dist; // 140
        const d2_dist = rect_x - wire1_x; // 110

        const wire_y_start = 40;
        const wire_y_end = 360;

        // Draw the two long wires
        // The breaks in the original image are a convention for 'infinite'. 
        // We draw solid lines which is a common and clear representation.
        ctx.beginPath();
        ctx.moveTo(wire1_x, wire_y_start);
        ctx.lineTo(wire1_x, wire_y_start + 15);
        ctx.moveTo(wire1_x, wire_y_start + 25);
        ctx.lineTo(wire1_x, wire_y_end - 25);
        ctx.moveTo(wire1_x, wire_y_end - 15);
        ctx.lineTo(wire1_x, wire_y_end);
        
        ctx.moveTo(wire2_x, wire_y_start);
        ctx.lineTo(wire2_x, wire_y_start + 15);
        ctx.moveTo(wire2_x, wire_y_start + 25);
        ctx.lineTo(wire2_x, wire_y_end - 25);
        ctx.moveTo(wire2_x, wire_y_end - 15);
        ctx.lineTo(wire2_x, wire_y_end);
        ctx.stroke();

        // Draw current arrows and labels 'I'
        ctx.beginPath();
        drawArrow(ctx, wire1_x, 140, wire1_x, 120);
        ctx.stroke();
        ctx.fillText("I", wire1_x - 15, 130);

        ctx.beginPath();
        drawArrow(ctx, wire2_x, 140, wire2_x, 120);
        ctx.stroke();
        ctx.fillText("I", wire2_x - 15, 130);

        // Draw the rectangular coil
        ctx.strokeRect(rect_x, rect_y, rect_w, rect_h);

        // --- Draw Dimension Lines and Labels ---
        
        // Dimension l2
        const l2_line_y = rect_y - 20;
        ctx.beginPath();
        drawDimArrow(ctx, rect_x, l2_line_y, rect_x + rect_w, l2_line_y);
        ctx.stroke();
        drawSubscript(ctx, "l", "2", rect_x + rect_w / 2, l2_line_y - 8);

        // Dimension l1
        const l1_line_x = rect_x + rect_w + 30;
        ctx.beginPath();
        drawDimT(ctx, l1_line_x, rect_y, l1_line_x, rect_y + rect_h);
        ctx.stroke();
        // Custom draw for vertical label l1
        const baseFont_l1 = "italic 20px Times New Roman";
        const subFont_l1 = "14px Times New Roman";
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.font = baseFont_l1;
        ctx.fillText("l", l1_line_x + 8, cy);
        ctx.font = subFont_l1;
        const l_width = ctx.measureText("l").width;
        ctx.fillText("1", l1_line_x + 8 + l_width, cy + 5);
        
        // Dimension d1
        const d1_line_y = cy - 40;
        ctx.beginPath();
        drawDimArrow(ctx, wire2_x, d1_line_y, rect_x, d1_line_y);
        ctx.stroke();
        drawSubscript(ctx, "d", "1", wire2_x + d1_dist / 2, d1_line_y - 8);
        
        // Dimension d2
        const d2_line_y = cy + 40;
        ctx.beginPath();
        drawDimArrow(ctx, wire1_x, d2_line_y, rect_x, d2_line_y);
        ctx.stroke();
        drawSubscript(ctx, "d", "2", wire1_x + d2_dist / 2, d2_line_y - 8);
        
        // Draw bottom caption
        ctx.font = "22px STSong"; // A common font for Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText("习题 9-1 图", canvas.width / 2, canvas.height - 10);

    </script>
</body>
</html>